{% extends "docker_engine/base.html" %}


{% load staticfiles %}


{% block extra-css %}
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/fancybox/source/jquery.fancybox.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/uniform/css/uniform.default.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/data-tables/DT_bootstrap.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/css/custom.css' %}" />
{% endblock %}


{% block content %}       
<div id="page" class="dashboard">
    <!-- BEGIN EXAMPLE TABLE PORTLET-->
    <div class="widget">
        <div class="widget-title">
            <h4><i class="icon-reorder"></i> Containers</h4>                  
        </div>
        <div class="widget-body">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th width="10%" class="hidden-phone">Name</th>
                        <th width="10%" class="hidden-phone">Image</th>
                        <th width="10%" class="hidden-phone">Status</th>
                        <th width="10%" class="hidden-phone">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for container in containers %}
                    <tr class="odd gradeX">
                        <td>
                            <a href="{% url 'container_detail' container.name %}">{{ container.name }}</a>
                        </td>
                        <td>{{ container.image.name }}</td>
                        <td>
                            <p class="container_status">
                                {% if container.status == "R" %}
                                Running
                                {% elif container.status == "S" %}
                                Stopped
                                {% endif %}
                            </p>
                        </td>
                        <td>
                            <a href="{% url 'container_delete' container.name %}">
                                <button class="btn-mini btn-danger delete_button"><i class="icon-remove"></i> Delete Container</button>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- END EXAMPLE TABLE PORTLET-->


<!-- BEGIN BUTTONS WITH ICONS PORTLET-->
<div class="create_button">
    <p>
        <a href="{% url 'container_new' %}"><button class="btn btn-primary"><i class="icon-plus icon-white"></i> Create Container</button></a>
    </p>
</div>
<!-- END BUTTONS WITH ICONS PORTLET-->
</div>
{% endblock %}


{% block extra-js %}
<script src="{% static 'docker_engine/assets/data-tables/jquery.dataTables.js' %}"></script>
<script src="{% static 'docker_engine/assets/data-tables/DT_bootstrap.js' %}"></script>
<script src="{% static 'docker_engine/assets/uniform/jquery.uniform.min.js' %}"></script>
<script src="{% static 'docker_engine/assets/fancybox/source/jquery.fancybox.pack.js' %}"></script>
<script src="{% static 'docker_engine/js/container/all.js' %}"></script>
<script src="{% static 'docker_engine/js/container/index.js' %}"></script>
{% endblock %}